<!--36_尚硅谷_Promise从入门到自定义_async与await.avi-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_async与await</title>
</head>
<body>
<script>
  /* 
    目标: 进一步掌握asyn/await的语法和使用
    mdn文档:
      https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await
	  
    1. async 函数
      函数的返回值为promise对象
      promise对象的结果由async函数执行的返回值决定
   
    2. await 表达式
      await右侧的表达式一般为promise对象, 但也可以是其它的值
	        如果表达式是promise对象, await返回的是promise成功的值
	        如果表达式是其它值, 直接将此值作为await的返回值
    
    3. 注意:
      await必须写在async函数中, 但async函数中可以没有await
            如果await的promise失败了, 就会抛出异常, 需要通过try...catch来捕获处理
  */

  // async函数的返回值是一个promise对象
  // async函数返回的promise的结果由函数执行的结果决定
  async function fn1(){
  	// return 1
  	// throw 2
  	// return Promise.resolve(3)
  	// return Promise.reject(4)
  	return new Promise((resolve, reject) => {
  		setTimeout(() => {
  			resolve(5)
  		}, 1000)
  	})
  }
  
  const result = fn1()
  // console.log(result)
  result.then(
  	value => {
  		console.log('onResolved()', value)
  	},
  	reason => {
  		console.log('onRejected()', reason)
  	}
  )
  
  function fn2(){
  	return new Promise((resolve, reject) => {
  		setTimeout(() => {
  			resolve(6)
  		}, 1000)
  	})
  }
  
  function fn3(){
  	return 6
  }
  
  async function fn4(){
  	// const value = await fn2() // await右侧表达为promise，得到的结果就是promise成功的value
  	const value = await fn3() // await右侧表达不是promise，得到的结果就是它本身
  	console.log('value', value)
  }
  fn4()
  
  
  function fn5(){
  	return new Promise((resolve, reject) => {
  		setTimeout(() => {
  			reject(7)
  		}, 1000)
  	})
  }
  
  async function fn6(){
  	try {
  		const value = await fn5()
  		console.log('value', value)
  	} catch (error) {
  		console.log('得到失败的结果', error)
  	}
  }
  fn6()
</script>
</body>
</html>